<template>
	<view class="details">
		<!-- 详细页面的头部 -->
		<view class="details-header">
			<view class="details-header-list" v-for="(item, index) in detailsHeader" :key="index">
				<!-- 头部图片 -->
				<view class="details-header-imgs">
					<image class="details-header-img" :src="item.imgurl"></image>

					<!-- 小火 -->
					<view class="fire">
						<image class="fire-img" :src="item.fireUrl"></image>
						<text>{{ item.fireCount }}</text>
					</view>
				</view>

				<!-- 下面的内容 -->
				<view class="details-header-contents">
					<view class="contents-title">{{ item.title }}</view>
					<view class="item-des">{{ item.des }}</view>
					<view class="view-price">
						<view class="view-show">
							<text :class="'style' + index" class="my-style" v-for="(list, index) in item.labels">{{ list.name }}</text>
						</view>
						<view class="item-price">{{ item.price }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 间距盒子背景 -->
		<view class="view-hr"></view>

		<!-- 食材配置 -->
		<view class="deploy view-wrap">
			<view class="deploy-title view-title">{{ deploy.title }}</view>
			<view class="deploy-ul">
				<view class="deploy-li" v-for="(item, index) in deploy.deployLi" :key="index">
					<image :src="item.imgUrl"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>

			<!-- 线 -->
			<view class="view-lint"></view>

			<!-- 查看更多 -->
			<view class="look-more">查看更多</view>
		</view>

		<!-- 间距盒子背景 -->
		<view class="view-hr"></view>

		<!-- 菜品组成 -->
		<view class="make-up view-wrap">
			<view class="deploy-title view-title">{{ makeUp.title }}</view>
			<view class="deploy-ul">
				<view class="deploy-li" v-for="(item, index) in makeUp.makeUpLi" :key="index">
					<image :src="item.imgUrl"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>

			<!-- 线 -->
			<view class="view-lint"></view>

			<!-- 查看更多 -->
			<view class="look-more">查看全部餐品</view>
		</view>

		<!-- 间距盒子背景 -->
		<view class="view-hr"></view>

		<!-- 平台保障 -->
		<view class="safeguard view-wrap">
			<view class="deploy-title view-title">{{ safeguard.title }}</view>
			<view class="deploy-ul">
				<view class="deploy-li" v-for="(item, index) in safeguard.safeguardLi" :key="index">
					<image :src="item.imgUrl"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 间距盒子背景 -->
		<view class="view-hr"></view>

		<!-- 评价 -->
		<view class="judge view-wrap ">
			<!-- 标题 -->
			<view class="judge-title view-title">
				<text>{{ judge.judgeTitle }} ({{ judge.judgeCount }})</text>
			</view>

			<view class="item-list" v-for="item in judge.judge">
				<view class="hello">
					<!-- 用户头像 -->
					<view class="header-img"><image :src="item.headerurl"></image></view>
					
					<!-- 用户信息 -->
					<view class="user-info">
						<!-- 用户名称和时间 -->
						<view class="user-name-time">
							<view class="user-name">{{ item.username }}</view>
							<view class="user-time">{{ item.userTime }}</view>
						</view>
						<!-- 用户评价星星 -->
						<view class="star">
							<view class="star-count" v-for="list in 5"><image :src="item.star[0].starUrl"></image></view>
						</view>
						<!-- 用户评语 -->
						<view class="judge-word">{{ item.judgeWord }}</view>
					
						<!-- 回复 -->
						<view class="answer">
							<text class="user-answer">{{ item.userAnswer }}:</text>
					
							<text class="answer-show">{{ item.answerShow }}</text>
						</view>
					</view>
					
				</view>
				<!-- 线 -->
				<view class="view-lint"></view>
				
					<!-- 查看更多 -->
					<view class="look-more">查看更多评论</view>
			
			</view>
		</view>
	
	
		<!-- 按钮底部 -->
		<view class="footer">
			<view class="customer-service">
				<image src="../../static/imgs/客服.png"></image>
				<text>客服</text>
			</view>
			
			<view class="collect">
				<image src="../../static/imgs/收藏.png"></image>
				<text>收藏</text>
			</view>
			
			<!-- 立即下单 -->
			<view class="my-style-btn" @tap="handerNavTo">立即下单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 头部信息
			detailsHeader: [
				{
					imgurl: '../../static/imgs/trip/25.png',
					fireUrl: '../../static/imgs/fire.png',
					fireCount: '1888',
					title: '法式经典盛夏海鲜家宴',
					des: '八菜一汤，特色甜点',
					labels: [
						{
							name: '精品'
						},
						{
							name: '优选'
						},
						{
							name: '热销'
						}
					],
					price: '￥4999/桌'
				}
			],

			// 食材配置
			deploy: {
				title: '食材配置',
				deployLi: [
					{
						imgUrl: '../../static/imgs/trip/26.png',
						name: '猪肉'
					},
					{
						imgUrl: '../../static/imgs/trip/26.png',
						name: '猪肉'
					},
					{
						imgUrl: '../../static/imgs/trip/26.png',
						name: '猪肉'
					},
					{
						imgUrl: '../../static/imgs/trip/26.png',
						name: '猪肉'
					},
					{
						imgUrl: '../../static/imgs/trip/26.png',
						name: '猪肉'
					}
				]
			},

			// 菜品组成
			makeUp: {
				title: '菜品组成',
				makeUpLi: [
					{
						imgUrl: '../../static/imgs/trip/31.png',
						name: '猪肉'
					},
					{
						imgUrl: '../../static/imgs/trip/32.png',
						name: '猪肉'
					}
				]
			},

			// 平台保障
			safeguard: {
				title: '平台保障',
				safeguardLi: [
					{
						imgUrl: '../../static/imgs/trip/31.png',
						name: '猪肉'
					},
					{
						imgUrl: '../../static/imgs/trip/32.png',
						name: '猪肉'
					},
					{
						imgUrl: '../../static/imgs/trip/32.png',
						name: '猪肉'
					}
				]
			},

			//评价
			judge: {
				judgeTitle: '评价',
				judgeCount: '99',
				judge: [
					{
						headerurl: '../../static/imgs/other/img9.png',
						username: '刘星',
						userTime: '2020-9-29',
						star: [
							{
								starCount: '5',
								starUrl: '../../static/imgs/star-small-c.png'
							}
						],
						judgeWord: '好！很好！非常好！特别好！',
						userAnswer: '四海香客服',
						answerShow: '感谢支持'
					},
					{
						headerurl: '../../static/imgs/other/img10.png',
						username: '刘星',
						userTime: '2020-9-29',
						star: [
							{
								starCount: '5',
								starUrl: '../../static/imgs/star-small-c.png'
							}
						],
						judgeWord: '好！很好！非常好！特别好！',
						userAnswer: '四海香客服',
						answerShow: '感谢支持'
					}
				]
			}
		};
	},
	onLoad() {},
	methods: {
		handerNavTo(){
			uni.navigateTo({
				url:'/pages/order/order'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.view-hr {
	width: 100%;
	height: 25rpx;
	background-color: #efefef;
}

.view-wrap {
	padding: 0 40rpx;
	box-sizing: border-box;
}

.view-title {
	margin: 40rpx 0;
}

.view-lint {
	border: 1rpx solid #efefef;
	width: 100%;
	margin: 30rpx 0;
}

// 详情头部
.details-header {
	.details-header-list {
		.details-header-imgs {
			width: 100%;
			height: 450rpx;
			position: relative;
			.details-header-img {
				width: 100%;
				height: 450rpx;
			}
			// 小火
			.fire {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
				width: 130rpx;
				height: 50rpx;
				background-color: rgba(0, 0, 0, 0.1);
				padding: 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.fire-img {
					width: 25rpx;
					height: 30rpx;
					margin-right: 15rpx;
					vertical-align: middle;
				}
				text {
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
	}
	// 下面的内容
	.details-header-contents {
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.contents-title {
			font-size: 38rpx;
			line-height: 2;
		}
		.item-des {
			font-size: 28rpx;
			color: #999;
		}

		.view-price {
			display: flex;
			justify-content: space-between;
			.view-show {
				display: flex;
				margin: 30rpx 0;
				.my-style {
					width: 70rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 6rpx;
					padding: 5rpx;
					margin-right: 20rpx;
				}
				.style0 {
					border: 1rpx solid red;
					color: red;
				}
				.style1 {
					border: 1rpx solid green;
					color: green;
				}
				.style2 {
					border: 1rpx solid blue;
					color: blue;
				}
			}

			// 价格
			.item-price {
				margin-top: 30rpx;
				font-size: 36rpx;
				color: #f0ad4e;
			}
		}
	}
}

// 食材配置
.deploy {
	// 标题
	.deploy-title {
		font-size: 38rpx;
	}
	.deploy-ul {
		display: flex;
		.deploy-li {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			image {
				width: 95rpx;
				height: 95rpx;
			}
			text {
				line-height: 2.5;
				font-size: 28rpx;
				color: #777;
			}
		}
	}
	// 查看更多
	.look-more {
		font-size: 30rpx;
		color: #777;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// 菜品组成
.make-up {
	// 标题
	.deploy-title {
		font-size: 38rpx;
	}
	.deploy-ul {
		display: flex;
		.deploy-li {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			image {
				width: 320rpx;
				height: 220rpx;
			}
			text {
				line-height: 2.5;
				font-size: 28rpx;
				color: #777;
			}
		}
	}
	// 查看更多
	.look-more {
		font-size: 30rpx;
		color: #777;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// 平台保障
.safeguard {
	padding-bottom: 30rpx;
	// 标题
	.deploy-title {
		font-size: 38rpx;
	}
	.deploy-ul {
		display: flex;
		position: relative;
		.deploy-li {
			width: 100%;
			border-right: 1rpx solid #efefef;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;
			}
			text {
				line-height: 2.5;
				font-size: 28rpx;
				color: #777;
			}

			// &.deploy-li::before{
			// 	content: '';
			// 	position: absolute;
			// 	width: 1rpx;
			// 	height: 50rpx;
			// 	top: 0;
			// 	left: 0;
			// 	border-right: 1rpx solid red;
			// }

			&.deploy-li:nth-child(3) {
				border-right: none;
			}
		}
	}
	// 查看更多
	.look-more {
		font-size: 30rpx;
		color: #777;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// 评价
.judge {
	.hello {
		display: flex;
		.header-img {
			image {
				width: 85rpx;
				height: 85rpx;
				border-radius: 45rpx;
			}
		}
		.user-info {
			width: 100%;
			margin-left: 30rpx;
			.user-name-time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.user-name {
					font-size: 34rpx;
				}
				.user-time {
					color: #777;
					font-size: 30rpx;
				}
			}

			// 星星
			.star {
				display: flex;
				align-items: center;
				.star-count {
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 5rpx;
					}
				}
			}

			.judge-word {
				line-height: 2;
			}

			// 回复
			.answer {
				width: 100%;
				height: 50rpx;
				background-color: rgba(0, 0, 0, 0.06);
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				margin: 20rpx 0;
				.user-answer {
					color: #f0ad4e;
					margin-right: 10rpx;
				}
			}
		}
	}

	// 更多评论
	.look-more{
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #777;
		font-size: 28rpx;
	}
}

// footer
.footer{
	border-top: 1rpx solid #efefef;
	height: 98rpx;
	width: 100%;
	display: flex;
	padding: 20rpx 0;
	box-sizing: border-box;
	.customer-service,.collect{
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1rpx solid #efefef;
		width: 130rpx;
		height: 98rpx;

	  // box-sizing: border-box;
		flex:1;
	
		image{
			width: 46rpx;
			height: 46rpx;
		}
		text{
			font-size: 30rpx;
			color: #777;
			line-height: 2;
		}
	}
	.my-style-btn{
		// width: 100%;
		height: 98rpx;
		flex:4;
		background-color: #F0AD4E;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
